import { Button, DatePicker, Input, NavBar, Toast } from "antd-mobile";
import Icon from "@/components/Icon";
import "./index.scss";
import classNames from "classnames";
import { billListData } from "@/contants";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { addBillList } from "@/store/modules/billStore";
import { useDispatch } from "react-redux";
import dayjs from "dayjs";

const New = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [billType, setBillType] = useState("pay");
  const [billUseFor, setBillUseFor] = useState("");
  const [billMoney, setBillMoney] = useState("");
  const [datePickerVisible, setDatePickerVisible] = useState(false);
  const [date, setDate] = useState(new Date());
  const resetForm = () => {
    setBillUseFor("");
    setBillMoney("");
  };
  const billTypeChange = (type) => {
    resetForm();
    setBillType(type);
  };
  const moneyChangeHandler = (value) => {
    if (!value) {
      setBillMoney("");
      return;
    }
    setBillMoney(parseFloat(value));
  };
  const saveBill = () => {
    const data = {
      type: billType,
      useFor: billUseFor,
      date,
      money: billType === "pay" ? -billMoney : billMoney,
    };
    if (!billUseFor) {
      Toast.show({
        icon: "fail",
        content: "未选择账单种类",
      });
      return;
    }
    if (!billMoney) {
      Toast.show({
        icon: "fail",
        content: "未输入账单金额",
      });
      return;
    }
    dispatch(addBillList(data));
    resetForm();
    navigate(-1);
  };
  const dateComifrmHandler = (date) => {
    setDate(date);
    setDatePickerVisible(false);
  };
  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(billType === "pay" && "selected")}
            onClick={() => billTypeChange("pay")}
          >
            支出
          </Button>
          <Button
            className={classNames(billType === "income" && "selected")}
            shape="rounded"
            onClick={() => billTypeChange("income")}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date" onClick={() => setDatePickerVisible(true)}>
              <Icon type="calendar" className="icon" />
              <span className="text">{dayjs(date).format("YYYY-MM-DD")}</span>
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={new Date()}
                visible={datePickerVisible}
                onCancel={() => setDatePickerVisible(false)}
                onConfirm={dateComifrmHandler}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={billMoney}
                onChange={moneyChangeHandler}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {billListData[billType].map((item) => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map((item) => {
                  return (
                    <div
                      className={classNames(
                        "item",
                        billUseFor === item.type && "selected"
                      )}
                      key={item.type}
                      onClick={() => setBillUseFor(item.type)}
                    >
                      <div className="icon">
                        <Icon type={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div className="btns">
        <Button className="btn save" onClick={saveBill}>
          保 存
        </Button>
      </div>
    </div>
  );
};

export default New;
